<template>
  <!-- 左右模块 -->
  <div>
    <div class="Center_left">
      <div class="left_L">
        <ul>
          <li v-for="(item, i) in tabList" :key="i" @click="onChange(item.tab)"
            :class="item.tab == onpageObj.tab ? 'actives' : ''"><a>{{
                item.til
            }}</a>
          </li>
        </ul>
      </div>
      <div class="img_url" v-show="isshow">
        <div style="padding: 20px 0px;text-align: center;" v-for="ite in onUserlist">
          <img :src="ite.good_img" alt="">
          <div style="font-size: 12px;">{{ ite.type }}</div>
        </div>
      </div>
      <div v-show="onshow" class="Center_right">
        <div class="div_childern">
          <div>只看已收藏品牌</div>
          <div @click="overchange">
            <van-switch v-model="checked" active-color="#000" inactive-color="#d8d8d8" size="18px" />
          </div>
        </div>
        <p v-if="isisshow">热门品牌</p>
        <div v-if="isisshow">
          <van-index-bar v-for="item in onUserlist" :key="item.path">
            <div class="fotter_we">
              <router-link :to="{path:'/topic/',query:{
                id:item.id,
                good_brand:item.good_brand,
                good_img:item.good_img,
              }
                }">
                <van-cell :title="item.good_name"></van-cell>
              </router-link>
              <img src="../../assets/images/images/c554ec5ac8e855b1799197d616c5f40_03.jpg" style="background: #333;"
                @click="onShouchang(item.id)" />
            </div>
          </van-index-bar>
        </div>
        <div v-if="!isisshow">已经收藏</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted,reactive } from 'vue'
const { onUserlist, onpageObj }: any = defineProps({
  onUserlist: Array,
  onpageObj: Object
})

const isisshow = ref<boolean>(true)
const overchange = () => {
    if(isisshow.value){
      isisshow.value = false
    }else{
      isisshow.value = true
    }
}

const onshow = ref<boolean>(true)
const isshow = ref<boolean>(false)
const tabList: any = ref([
  {
    tab: 'whole',
    til: '全部品牌'
  },
  {
    tab: 'clothing',
    til: '服装'
  },
  {
    tab: 'footwear',
    til: '鞋履'
  },
  {
    tab: 'bag',
    til: '包袋'
  },
  {
    tab: 'accessories',
    til: '配饰'
  }
])
const onShouchang = (id: any) => {
  console.log(id, 'pkpk')
}
// 获取emit
const emit = defineEmits(["acc"]);
// const transData = () => {
//   emit("abc", "我是list组件");
// };
const onChange = (tab: any) => {
  onpageObj.tab = tab
  onshow.value = false
  isshow.value = true
  if (tab == 'whole') {
    onshow.value = true
    isshow.value = false
  }
  console.log(tab, 'gg');
  emit("acc", tab)
}

let vants = ref(0)
//显示收藏
const checked = ref(false);
//定义一个下标
</script>
<style lang="scss" scoped>
.fotter_we {
  width: 90%;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: space-between;

  div {
    margin-right: 40px;
  }

  img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background: #333;
  }
}

.img_url {
  display: flex;
  flex: 1;
  justify-content: space-around;
  overflow-y: auto;
  overflow-x: hidden;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;

  img {
    width: 80px;
    height: 80px;
  }
}


.van-index-bar__index {
  font-weight: 100px;
}

.Center_left {
  display: flex;
  background: #fff;
}

.Center_right {
  overflow-x: hidden;
  overflow-y: auto;
  height: 75vh;
  width: 80%;
  overflow: auto;
}

.Center_right .div_childern {
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  // margin-bottom: 7px;
  font-size: 14px;
  color: #020202;
  // background: #ccc;
  border-bottom: 1px solid #f2f2f2;
}

.Center_right p {
  font-size: 12px;
  padding: 10px;
}

.left_L {
  width: 20%;
  height: 75vh;
  background: #fff;
  font-size: 14px;
  border-right: 1px solid #f2f2f2;
}

.van-index-bar__index {
  font-weight: normal;
}

.left_L ul li {
  padding: 10px 0px 10px 0px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 20px;
}

.actives {
  border-bottom: 2px solid #000;

  a {
    color: #000;
    // transition: 2s;
  }
}

.banner_top {
  margin: 0 auto;
}
</style>
